<!--
 1. 脚手架里面提供一种新的组件组织方式： .vue 单文件组件
 2. 底层使用的 vue-loader 实现的翻译
 3. 单文件组件里面由三个部分组成
  3.1 template 组件的结构
  3.2 script 业务代码
  3.3 style 组件样式

  https://cn.vuejs.org/v2/guide/single-file-components.html

-->

<template>
  <!--单文件组件，必须有一个根节点-->
  <div class="wrap">
    <h2>我是单文件组件</h2>
    <p>Lorem ipsum dolor sit amet, consectetur.</p>
    <p>{{ number1 + number2 }}</p>
    <p>dbNumber2:{{ dbNumber2 }}</p>
    <button @click="clickHander">点击我</button>
  </div>

</template>

<script>
  /* eslint
  *  https://eslint.bootcss.com/
  *
  * */
  export default {
    name: 'App1', // 组件的名称，非必须
    data () {
      return {
        number1: 1,
        number2: 23
      }
    },
    created() {
      console.log('created')
    },
    watch: {
      number2(newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    },
    computed: {
      dbNumber2: function () {
        return this.number2 * 2
      }
    },
    updated() {
      console.log('updated')
    },
    methods: {
      clickHander(e) {
        console.log('clickHander', e)
        this.number2++
      }

    }
  }

</script>

<style lang="less">

  .wrap {
    border: 1px solid red;

    h2 {
      background-color: #0f0;
    }

    p {
      &::last-child {
        color: #00f;
      }
    }
  }

</style>
